<template>
	<div style="width: 200px;height: 100%; ">
		 <a-menu
				style="height: 100%;text-align: left;"
		      mode="inline"
		      theme="dark"
		      :inline-collapsed="collapsed"
			  @click="menuClick"
		    >
		      <template v-for="item in menuList">
		        <a-menu-item :key="item.url">
		          <a-icon :type="item.icon" class="menu-icon" />
		          <span>{{ item.name }}</span>
		        </a-menu-item>
		      </template>
		    </a-menu>
	</div>
</template>

<script>
	import subMenu from './subMenu.vue';
	export default {
		components: {
		    subMenu,
		  },
		data() {
			return {
				menuList: [{
						id:'1',
						name: '轮播图管理',
						url: 'banner',
						icon:'picture'
					},
					{
						id:'2',
						name: '团队风采',
						url: 'team',
						icon:'appstore'
					},
					{
						id:'6',
						name: '产品及服务管理',
						url: 'serve',
						icon:'appstore'
					},{
						id:'3',
						name: '招聘管理',
						url: 'job',
						icon:'code'
					},{
						id:'4',
						name: '求职者管理',
						url: 'recruitment',
						icon:"idcard"
					},{
						id:'5',
						name: '新闻管理',
						icon:'database',
						url: 'news',
					},
				],
			};
		},
		created() {
			this.selectedKey = this.vuex_meun_name;
		},
		methods: {
			menuClick(e){
				console.log(e)
				this.$router.push({name:e.key})
			},
		},
	};
</script>

<style>
.ant-menu-submenu{
	width: 100%;
	margin: 0;
}
.ant-menu-item .anticon, .ant-menu-submenu-title .anticon{
	margin-right: 18px;
}
.ant-menu-vertical .ant-menu-item, .ant-menu-vertical-left .ant-menu-item, .ant-menu-vertical-right .ant-menu-item, .ant-menu-inline .ant-menu-item, .ant-menu-vertical .ant-menu-submenu-title, .ant-menu-vertical-left .ant-menu-submenu-title, .ant-menu-vertical-right .ant-menu-submenu-title, .ant-menu-inline .ant-menu-submenu-title{
	margin: 0;
	background: #000c17;
}
.subP{
	padding-left: 70px !important;
}
</style>
